<template>
  <div style="text-align: center">
    <input class="ipt" type="text" v-model="message" />
    <button class="bth" @click="appendMsg">添加</button>
    <br />

    <list-item
      v-for="(item, index) in dataList"
      :text="item"
      :key="index"
      :index="index"
      @change="textChange"
    ></list-item>
    <div v-show="dataList.length > 0">总计:{{ dataList.length }}条</div>
  </div>
</template>
<script>
import listItem from "./list-item.vue";

export default {
  components: {
    listItem,
  },
  data() {
    return {
      message: "",
      dataList: [],
    };
  },
  methods: {
    appendMsg() {
      this.dataList.push(this.message);
    },
    textChange(text, index) {
      this.$set(this.dataList, index, text);
    },
  },
};
</script>
</script>
<style scoped>
.ipt {
  height: 40px;
  outline: none;
}
.bth {
  height: 40px;
  background: #40b883;
  color: white;
  margin-bottom: 20px;
}
.item {
  width: 200px;
  height: 40px;
  line-height: 40px;
  background: #40b883;
  color: white;
  border-bottom: 1px solid #ccc;
  margin: 0 auto;
}
</style>